<template>
  <div class="hello">
    <ve-wordcloud
      height="100%"
      :data="chartData"
      :settings="chartSettings"
      :extend="chartExtend"
    ></ve-wordcloud>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Home',
  data() {
    this.chartSettings = {
      color: ['red', 'pink', 'green', 'yellow']
    }
    return {
      worldCloud: [],
      chartData: {},
      chartExtend: {
        series: {
          shape: 'circle',
          rotationRange: [0, 0],
          sizeRange: [10, 20],
          width: '100%',
          height: '100%',
          drawOutOfBound: false,
          gridSize: 50
        }
      }
    }
  },
  watch: {
    worldCloud: function (val) {
      console.log('val:', val)
      const data = []
      val.forEach((item) => {
        data.push({
          name: item.word,
          value: item.count
        })
      })
      this.chartData = {
        columns: ['name', 'value'],
        rows: data
      }
      console.log('data:', data)
    }
  },
  mounted() {
    axios({
      method: 'get',
      url: 'https://apis.imooc.com/screen/wordcloud',
      params: {
        icode: '995058E8904B9577'
      }
    }).then((res) => {
      console.log('Res:', res)
      this.worldCloud = res.data
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.hello {
  width: 1000px;
  height: 1000px;
}
</style>
